<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>后台界面</title>
		<link href="<%=request.getContextPath()%>/jquery-easyui-1.5/themes/bootstrap/easyui.css" rel="stylesheet"/>
		<link href="<%=request.getContextPath()%>/jquery-easyui-1.5/themes/icon.css" rel="stylesheet"/>
		<script src="<%=request.getContextPath()%>/jquery-easyui-1.5/jquery.min.js"></script>
		<script src="<%=request.getContextPath()%>/jquery-easyui-1.5/jquery.easyui.min.js"></script>
		<script src="<%=request.getContextPath()%>/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
		<style>
			body {
				font-family: '微软雅黑';
				font-size: 16px;
			}
			.logo {
				width:100px;
				height:90px;
				line-height: 90px;
				font-size: 24px;
				margin-left: 20px;
				float: left;
			}
			.logout {
				float:right;
				line-height: 90px;
				margin-right: 20px;
			}
			.talent-add {
				padding:10px 20px; 
				text-align:center;
			}
			.talent-add input, .talent-add select {
				width: 200px;
			}
			#talentAddButtons {
				text-align: center;
			}
		</style>
	</head>
	<body class="easyui-layout">
	    <div style="height:100px;" data-options="
	    region:'north',   <!-- 北边 -->
	    collapsible: false,  <!-- 北边上面的横线，可以折叠上去的，禁用掉了 -->
	    noheader: true">		<!-- 是否显示的头部 -->
	    	<div class="logo">后台管理</div>
	    	<div class="logout">你好，xxx | <a href="#">注销</a></div>
	    </div>
	    
	    <div style="width:200px;" data-options="
	    region:'west',
	    title:'菜单',
	    iconCls:'icon-more'">   <!-- 菜单左边的小图标 -->
	    	<ul id="nav"></ul>		<!-- 用js做的树形菜单 -->
	    </div>
	    
	    <div data-options="
	    region:'center',
	    noheader: true">
			<div id="tabs">  		<!-- 这里使用tab插件，下面tree添加tab时就在这里添加 -->
			   <div title="欢迎页" style="padding:10px;" data-options="
			   iconCls:'icon-tip'">
				  中间页面
			   </div>
			</div>
	    </div>
	    
		<div id="tabMenu" class="easyui-menu">
		    <div data-options="
		    name:'refresh'">
		    	刷新
		    </div>
		    <div data-options="
		    name:'closeCurrent'">
		    	关闭当前
		    </div>
		    <div data-options="
		    	name:'closeOther'">
		    	关闭其它
		    </div>
		    <div data-options="
		    name:'closeAll'">
		    	关闭全部
		    </div>
		</div>
		<script>	
			var main = {					/* 当前页面的变量，把所有的js方法放到init方法中 */
				init: function() {
					main.nav = $('#nav');
					main.tabs = $('#tabs');
					main.tabMenu = $('#tabMenu');
					
					// 请求tree数据        使用js的方式写tree，
					main.nav.tree({
						/* 这里请求或会返回json文本，而里面的数据根easyUI需要的数据名字刚好能对应上，它就会自己生成一棵树 */
						url: '<%=request.getContextPath()%>/TestServlet?command=listMenu',
						/* 将树形展开后，easyUI会自己把ID传到后台，然后查询出下一级 */
						 lines: true,			/* 显示树层级上面的小线条 */
						 /* 调用其组件中的方法，把子节点中的所有都查出来，就不用自己写递归了 */
						onLoadSuccess: function(node, data) {   
							main.nav.tree('expandAll')	
						},
						/* 点击节点一下，生成一个table出来 */
						onClick: function(node) {
							/* 每一个节点对象的属性就是树的属性，对应数据库中的属性 */
							if (node.url) {  /* 这里就把对象属性中对应的url页面打开了 */
 								if (main.tabs.tabs('exists', node.text)) {    //判断也签名字是否存在，返回的是boolean值
									main.tabs.tabs('select', node.text)
								} else { 
									main.tabs.tabs('add', {
										title: node.text,
										iconCls: node.iconCls,
										closable: true,
										href: node.url
									});
						 		} 
							}
						}
					});
					
			        // 初始化tab，并创建右键菜单
					main.tabs.tabs({
						border: false,
						fit: true,  //若只有一个tab，菜单很条也是盛满的
			            onContextMenu: function (e, title, index) {
			                e.preventDefault();   //阻止浏览器弹出的菜单
			                if (index > 0) {
			                	main.tabMenu.menu('show', {
			                        left: e.pageX,
			                        top: e.pageY
			                    }).data("tabTitle", title);
			                }
			            }
			        });
			        
			        // 右键菜单click
			        main.tabMenu.menu({
			            onClick: function (item) {
				            var allTabs = main.tabs.tabs('tabs');
				            var allTabtitle = [];
				            $.each(allTabs, function (i, v) {
				                var opt = $(v).panel('options');
				                if (opt.closable) {
				                    allTabtitle.push(opt.title);
				                }
				            });
				            var curTabTitle = $(this).data("tabTitle");
				            var curTabIndex = main.tabs.tabs("getTabIndex", main.tabs.tabs("getTab", curTabTitle));
				            switch (item.name) {
			                	case 'refresh':
			                    	var panel = main.tabs.tabs("getTab", curTabTitle).panel("refresh");
			                    	break;
				                case 'closeCurrent':
				                    main.tabs.tabs("close", curTabIndex);
				                    break;
				                case 'closeOther':
				                    $.each(allTabtitle, function(i, v) {
				                        if (curTabTitle != allTabtitle[i]) {
				                            main.tabs.tabs('close', allTabtitle[i]);
				                        }
				                    });
				                    main.tabs.tabs('select', curTabTitle);
				                    break; 
				                case 'closeAll':
				                    $.each(allTabtitle, function(i, v) {
				                        main.tabs.tabs('close', allTabtitle[i]);
				                    });
				                    break;
				            }
			            }
			        });
				}
			};
			
			$(function(){
				main.init();
			});
		</script>
	</body>
</html>